<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">

    <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="../bootstrap/css/bootstrap.css" rel="stylesheet">
    <script src="../bootstrap/js/jquery-3.3.1.min.js"></script>
    <script src="../bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/header.css">
    <link rel="stylesheet" type="text/css" href="../css/main.css">
    <link rel="stylesheet" type="text/css" href="../css/main2.css">
    <link rel="stylesheet" type="text/css" href="../css/manage.css">
    <link rel="stylesheet" type="text/css" href="../css/footer.css">

    <script src="../js/vue.js"></script>
    <link rel="stylesheet" href="../element/css/index.css">
    <script src="../element/index.js"></script>
    <script src="../js/axios.js"></script>
    <script src="../js/url.js"></script>
    <script src="../js/controller/headerController.js"></script>
    <script src="../js/service/headerService.js"></script>
    <script src="../js/controller/userController.js"></script>
    <script src="../js/service/userService.js"></script>

    <script src="../layui/layui.js" charset="utf-8"></script>
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">

    <title>后台管理</title>
</head>

<body>
<!-- 导航栏 -->
<div id="header"></div>

<div id="user-vue">
    <!-- 主体 -->
    <div class="container">
        <div class="contents">
            <div class="nav-next">
                <div class="nav-title">
                    <h3>后台管理</h3>
                </div>
                <a class="cardId" href="user.html">用户管理</a>
                <a class="cardId" href="movie.html">影片管理</a>
                <a class="cardId" href="cinema.html">影院管理</a>
                <a class="cardId" href="hall.html">影厅管理</a>
                <a class="cardId" href="schedule.html">场次管理</a>
                <a class="cardId" href="comment.html">评论管理</a>
                <a class="cardId" href="order.html">订单管理</a>
            </div>
            <div class="nav-body">
                <!-- 用户管理 -->
                <div class="one card" style="display: block;">
                    <div>
                        <div class="title">用户管理</div>
                        <hr/>
                    </div>
                    <!-- 用户列表 -->
                    <div id="userList" class="userlist">
                        <el-button type="primary">添加用户</el-button>
                        <el-input placeholder="请输入用户账号" v-model="input" clearable style="width:40%;margin-left: 50px">
                            <el-button slot="append" icon="el-icon-search"></el-button>
                        </el-input>
                        <!-- 占位符 -->
                        <div style="margin-top: 20px;"></div>
                        <el-table :data="userList" border style="width: 100%">
                            <el-table-column fixed prop="userName" label="昵称" width="140"></el-table-column>
                            <el-table-column prop="userAccount" label="账户" width="140"></el-table-column>
                            <el-table-column prop="userEmail" label="邮箱地址" width="200"></el-table-column>
                            <el-table-column prop="userPhone" label="联系号码" width="120"></el-table-column>
                            <el-table-column prop="roleExplain" label="用户角色" width="120"></el-table-column>
                            <el-table-column fixed="right" label="操作">
                                <template slot-scope="scope">
                                    <el-button @click="" type="text" size="small">查看</el-button>
                                    <el-button @click="" type="text" size="small">编辑</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <!--分页-->
                        <div style="margin-top: 20px">
                            <el-pagination background @size-change="handleSizeChange"
                                           @current-change="handleCurrentChange"
                                           :hide-on-single-page="value" :current-page="page.pageNum"
                                           :page-sizes="pageSizes"
                                           :page-size="page.pageSize" :pager-count="pagerCount" :total="page.total"
                                           layout="total, sizes, prev, pager, next, jumper">
                            </el-pagination>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--加载页头-->
<script>
    // 当文档加载完成后执行
    $(document).ready(function () {
        // 加载页头
        $("#header").load("header.html")
    })
</script>

<script>
    axios.defaults.baseURL = axios_url.adminBaseURL;
    var vueapp = new Vue({
        el: "#user-vue",
        data: {
            userList: '',               // 记录当前页的所有用户信息
            input: '',                  // 记录搜索框的搜索关键字

            page: "",					// 分页参数
            value: true,				// 是否开启分页隐藏功能
            pageSizes: [5, 10, 20],		// 每页条数选项列表
            pagerCount: 5				// 导航按钮数
        },
        methods: {
            findUserAll: user_yh_controller.findUserAll,

            // 分页功能 改变下拉框中每页的记录数时触发
            handleSizeChange: user_yh_service.handleSizeChange,
            // 分页功能 点击导航按钮时触发
            handleCurrentChange: user_yh_service.handleCurrentChange,
        },
        created: user_yh_service.created,
    })
</script>
</body>

</html>